<template>
  <nav class="flex index-nav-list">
    <a class="nav-item"
       v-for="item in navs"
       :key="'nav_'+item.nav_id"
       :href="item.nav_url">
      <img class="nav-icon"
           v-lazy="item.img" />
      <div>{{item.nav_title}}</div>
    </a>
  </nav>
</template>

<script>
export default {
  name: 'IndexNav',
  data() {
    return {}
  },
  props: {
    navs: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
// 导航键
.index-nav-list {
  padding: 0 10px;
  width: 100%;
  text-align: center;
  font-size: 12px;
  flex-wrap: wrap;
  .nav-item {
    width: 20%;
    min-width: 20%;
    padding: 10px;
    .nav-icon {
      width: 100%;
      margin-bottom: 8px;
    }
  }
}
</style>
